<template>
    <view class="tabs">
        <text v-for="tab in tabs" :key="tab.value" @click="changeTab(tab.value)" :class="{active: activeIndex==tab.value}" :style="{width: width}">{{tab.table}}</text>
    </view>
</template>
<script>
export default {
    data() {
        return {
            // activeIndex: 1
        }
    },
    props: {
        tabs: {
            type: Array,
            default: () => []
        },
        activeIndex: {
            type: Number,
            default: 1
        },
        width: {
            type: String,
            default: '25%'
        }
    },
    mounted(){
        // this.mounted
    },
    methods: {
        // 切换选项
        changeTab(val){
            // this.activeIndex = val;
            this.$emit('change', val)
        },
    }
}
</script>
<style lang="less" scoped>
    .tabs{
		padding: 24rpx 32rpx;
		margin-bottom: 8rpx;
		text{
			display: inline-block;
			width: 33.3%;
			font-size: 28rpx;
			color: #7f7f7f;
			padding: 8rpx 0;
			text-align: center;
		}
		.active{
			position: relative;
			color: #28C2CD;
			&::after{
				position: absolute;
				left: 50%;
                transform: translateX(-50%);
				bottom: -10rpx;
				content: '';
				height: 6rpx;
				width: 42rpx;
				border-radius: 3rpx;
				background-color: #28C2CD;
			}
		}
	}
</style>